<template>
  <div v-if="currentUser === null" class="personal-center">
    <!-- never display -->
    <p>您未登录</p>
  </div>
  <div v-else-if="isPhone" class="personal-center">
    <personal-center-mobile />
  </div>
  <div v-else class="personal-center">
    <personal-center-pc />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PersonalCenterPc from './PersonalCenterPc'
import PersonalCenterMobile from './PersonalCenterMobile'

export default {
  name: 'PersonalCenter',
  components: {
    PersonalCenterPc,
    PersonalCenterMobile
  },
  computed: {
    ...mapGetters({
      currentUser: 'currentUser',
      isPhone: 'isPhone'
    })
  }
}
</script>

<style scoped>
.is-phone .personal-center {
  height: 100%;
}
</style>
